<template>
  <PageLayout full :page-style="pageStyle">
    <template #header>
      <HeaderLayout show-back :title="headerTitle" :header-style="headerStyle" />
    </template>
    <!--水硬度顶部获取位置信息-->
    <view v-if="key === DISHWATER_SETTING_WATERHARDNESS" class="location-box">
      <view class="location-info">本地信息：{{ locationInfo }}</view>
      <view class="action-location" @click="getLocationPermission">{{ getLocationButtonText }}</view>
    </view>
    <view class="params-settings" :class="{ waterHard: key === DISHWATER_SETTING_WATERHARDNESS }">
      <!-- 嵌饮机 睡眠时间 -->
      <SettingGroup v-if="type === 'BIWD' && key === StandbyTime">
        <SettingRow
          v-for="(item, index) in sleepTimeListData"
          :key="index"
          :label="item.value"
          :selected="index === curIndex"
          @click="setBIWDSleepTime(index)"
        />
      </SettingGroup>
      <!-- 屏幕亮度 -->
      <SettingGroup v-else-if="type === 'BIWD' && key === NightModeBright">
        <SettingRow
          v-for="brightness in 5"
          :key="brightness"
          :label="brightness"
          :selected="brightness === curIndex + 1"
          @click="setBIWDNightModeBright(brightness)"
        >
          <template #label-suffix>
            <text v-if="brightness === 1">最暗</text>
            <text v-if="brightness === 5">最亮</text>
          </template>
        </SettingRow>
      </SettingGroup>
      <!-- 冰水温度 -->
      <SettingGroup v-if="type === 'BIWD' && key === BIWD_WATERTREATMENT_CHILLEDWATERTEMPERATURE">
        <SettingRow
          v-for="coolWater in coolWaterTempList"
          :key="coolWater"
          :label="coolWater + '℃'"
          :selected="coolWater === coolWaterTemp"
          @click="setCoolWaterTemp(coolWater)"
        >
        </SettingRow>
      </SettingGroup>
      <!-- TT 运行模式 -->
      <SettingGroup v-if="type === 'TT' && isShowRunMode">
        <SettingRow
          v-for="(item, index) in SummerMode"
          :key="index"
          :label="item"
          :selected="index === curIndex"
          @click="changeRunMode(index)"
        >
        </SettingRow>
      </SettingGroup>

      <template v-else>
        <!-- 枚举型 -->
        <SettingGroup v-if="keyType === 'EnumType'">
          <SettingRow
            v-for="(displayvalue, index) in setting?.constraints?.displayvalues"
            :key="index"
            :label="displayvalue"
            :desc="isRemoteControl ? RemoteControlDescriptions[index] : ''"
            :selected="setting?.displayvalue === displayvalue"
            @click="changeSetting(displayvalue, index)"
          >
            <template #label-suffix>
              <!-- 洗碗机本地水硬度标识 -->
              <view v-if="locanIndex === index && key === DISHWATER_SETTING_WATERHARDNESS" class="local-class"
                >本地</view
              >
            </template>
          </SettingRow>
        </SettingGroup>

        <!-- 范围型 -->
        <SettingGroup v-if="keyType === 'Range'">
          <SettingRow>
            <view class="range-picker">
              <view class="min-max-box">
                <view class="min-max">
                  <block>{{ min }}</block>
                  <text class="unit">{{ unit }}</text>
                </view>
                <view class="current">
                  <block>{{ defaultNum }}</block>
                  <text class="unit">{{ unit }}</text>
                </view>
                <view class="min-max">
                  <block>{{ max }}</block>
                  <text class="unit">{{ unit }}</text>
                </view>
              </view>
              <slider
                active-color="#408df2"
                background-color="#e9e9ed"
                :min="min"
                :max="max"
                :value="defaultNum"
                :step="stepSize"
                :block-size="24"
                @changing="onSliderChanging"
                @change="onSliderChange"
              />
            </view>
          </SettingRow>
        </SettingGroup>
      </template>
    </view>
    <Modal
      :visible="systemVisible"
      :title="$t('LocationPermission.System.Dialog.Title.Text')"
      :ok-text="$t('LocationPermission.System.Dialog.Ok.Text')"
      @ok="systemVisible = false"
      @cancel="systemVisible = false"
    >
      <image v-if="plantFrom === 'ios'" class="system-img" mode="widthFix" :src="systemImg"></image>
      <view class="modal-text text-left">{{ $t('LocationPermission.System.Dialog.Text') }}</view>
    </Modal>
    <Modal
      :visible="WeXinVisible"
      :title="$t('LocationPermission.WeiXin.Dialog.Title.Text')"
      :ok-text="$t('LocationPermission.WeiXin.Dialog.Ok.Text')"
      :cancel-text="$t('LocationPermission.WeiXin.Dialog.Cancel.Text')"
      @cancel="WeXinVisible = false"
      @ok="goToSetting"
    >
      <image class="system-img" mode="widthFix" :src="weiXinImg"></image>
      <view class="modal-text text-left">{{ $t('LocationPermission.WeiXin.Dialog.Text') }}</view>
    </Modal>
    <Modal
      :visible="AppVisible"
      :title="$t('LocationPermission.App.Dialog.Title.Text')"
      :ok-text="$t('LocationPermission.App.Dialog.Ok.Text')"
      :cancel-text="$t('LocationPermission.App.Dialog.Cancel.Text')"
      @cancel="AppVisible = false"
      @ok="directGet"
    >
      <view class="modal-text">{{ $t('LocationPermission.App.Dialog.Text') }}</view>
    </Modal>
    <!-- 远程启动提示框 -->
    <RemoteHint
      v-model:show="remoteHintVisible"
      :vib="vib"
      :title="$t('Appliance.RemoteHint.HowToEnableRemoteStartPermanent.Text')"
      :dismiss-text="$t('APP.Common.GotIt.Text')"
      :steps-getter="getRemoteHintSteps"
    />
  </PageLayout>
</template>

<script lang="ts">
export const sleepTimeListData: SleepTimeListType[] = [
  {
    key: 0,
    value: '30秒',
  },
  {
    key: 1,
    value: '1分钟',
  },
  {
    key: 2,
    value: '3分钟',
  },
  {
    key: 3,
    value: '5分钟',
  },
]
</script>

<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import Modal from '@/common/modal.vue'
import type { getSetting, setHomeApplianceSettings, setSetting, ApplianceSettingDes } from '@/api/appliance'
import type { getWaterHard } from '@/api/common'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { cloneDeep, toNumber } from 'lodash'
import {
  StandbyTime,
  NightModeBright,
  DatConfig,
  DatConfig_SetCollect,
  BIWD_WATERTREATMENT_CHILLEDWATERTEMPERATURE,
  BIWD_WATERTREATMENT_CHILLEDWATERSET,
} from '@/constants/WDCommand'
import {
  REMOTE_CONTROL_LEVEL_PERMANENT_REMOTE_START,
  SETTING_LIGHT_EXTERNAL,
  SETTING_LIGHT_INTERNAL,
  SETTING_LIGHT_LOGO,
  SETTING_REMOTE_CONTROL_LEVEL,
  TEMPERATURE_UNIT_CELSIUS,
  TT_SUMMER_BLMODE,
  TT_SUMMER_MODE,
} from '@/constants/Command'
import { actionDebounce, getPageQuery, showLoading } from '@/utils/mpHelper'
import SettingGroup from '@/common/setting/SettingGroup.vue'
import SettingRow from '@/common/setting/SettingRow.vue'
import type { SleepTimeListType } from '@/pages/appliance/BIWD/filterStatusList'
import { DISHWATER_SETTING_WATERHARDNESS } from '../../../constants/Command'
import {
  checkLocationPermission,
  OS_SYSTEM_LOCATION_PERMISSION,
  APPLICATION_LOCATION_PERMISSION,
  WXMP_LOCATION_PERMISSION,
} from '@/utils/basicHelper'
import { useEnvStore } from '@/store/env'
import netconfig from '@/config/netconfig'
import { TrackType, trackEvent } from '@/dataReport/tracks'

import { useGlobalStore } from '@/store/global'
import { useI18n } from 'vue-i18n'
import RemoteHint, { type StepsGetter } from '../view/remoteHint/remoteHint.vue'
import { safeTrack } from '@/dataReport/dataReportUtil'
import { setTTSetting } from '@/api/tt'
import { setTTSummerMode, TT_SETTING_BlState } from '../TT/SmartAssistantTool'
import type { WS } from '@/utils/socket/types'
import { WebsocketManager } from '@/utils/socket/WebsocketManager'
import { applianceControlTrack } from '@/dataReport/dataReportUtil'
export type ApiControl = {
  getSetting: typeof getSetting
  setHomeApplianceSettings: typeof setHomeApplianceSettings
  setSetting: typeof setSetting
  getWaterHard: typeof getWaterHard
}

const i18n = useI18n()
const props = defineProps<{
  apiControl: ApiControl
}>()

const pageStyle = {
  backgroundColor: '#f4f4f6',
}
const headerStyle = {
  backgroundColor: '#fff',
}
const globalStore = useGlobalStore()
const envStore = useEnvStore()
const plantFrom = computed(() => envStore.systemInfo.platform)

const headerTitle = ref('')
const isVirtual = ref(getPageQuery()?.isVirtual === 'true')
const haId = ref('')
const vib = ref('')
const key = ref('')
const type = ref('')
const curIndex = ref(0)
const keyType = ref<'EnumType' | 'Range'>('EnumType')
let parameterSettingKey = ref<string | undefined>('')
let trackData = ref<{ setting_key: string; setting_value: string | undefined } | null>(null)
const setting = ref<ApplianceSettingDes | null>(null)
const locationInfo = ref('无')
const getLocationButtonText = ref('获取本地信息')
const locanIndex = ref(-1)
const systemVisible = ref(false)
const WeXinVisible = ref(false)
const AppVisible = ref(false)
// 地理位置提示图片路径
let baseImgUrl = netconfig.IMGURL + 'WX_HC_Program/Assets/icons/'
let systemImg = netconfig.ASSETS_IMGURL + 'img_pop_Location_iOS2.png'
let weiXinImg = `${baseImgUrl}${
  plantFrom.value === 'ios' ? 'img_pop_Location_iOS.png' : 'img_pop_Location_Android.png'
}`
const oemApplianceTypes = ['HVN', 'TT', 'BIWD']

/**
 * 远程控制
 */
const isRemoteControl = computed(() => setting.value?.key === SETTING_REMOTE_CONTROL_LEVEL)
const RemoteControlDescriptions = computed(() => [
  i18n.t('Appliance.RemoteControlLevel.Monitoring.Description'),
  i18n.t('Appliance.RemoteControlLevel.ManualRemoteStart.Description'),
  i18n.t('Appliance.RemoteControlLevel.PermanentRemoteStart.Description'),
])
const remoteHintVisible = ref(false)
const getRemoteHintSteps: StepsGetter = (steps) => [steps[1]]

const coolWaterTempList = [10, 15]
const coolWaterTemp = ref(0)
const blState = ref('')

/**
 * 生命周期
 */
const onLoadCallback = () => {
  const query = getPageQuery()

  headerTitle.value = query?.title || ''
  haId.value = query?.haId
  vib.value = query?.vib
  key.value = query?.key
  type.value = query?.type
  curIndex.value = Number(query?.value)
  blState.value = query?.blState
  coolWaterTemp.value = Number(query.value)
  if (!['BIWD', 'TT'].includes(type.value)) {
    loadSettings()
  }

  // 洗碗机水硬度获取本地水硬度
  if (key.value === DISHWATER_SETTING_WATERHARDNESS) {
    loadLocalWaterHardness()
  }

  const isOemAppliance = oemApplianceTypes.includes(query.type)
  if (!isVirtual) {
    WebsocketManager.instance.connectWebsocket()
    if (isOemAppliance) {
      WebsocketManager.instance.oemWebsocket?.addMessageListener(listenMessage)
    } else {
      WebsocketManager.instance.inhouseWebsocket?.addMessageListener(listenMessage)
    }
  }
}
onLoad(() => onLoadCallback())
if (isVirtual.value) {
  onLoadCallback()
}

onUnload(() => {
  if (!isVirtual) {
    if (oemApplianceTypes.includes(type.value)) {
      WebsocketManager.instance.oemWebsocket?.removeMessageListener(listenMessage)
    } else {
      WebsocketManager.instance.inhouseWebsocket?.removeMessageListener(listenMessage)
    }
  }
})

/**
 * 获取本地水硬度
 */
async function loadLocalWaterHardness() {
  uni.getLocation({
    type: 'wgs84',
    async success(res) {
      const latitude = res.latitude
      const longitude = res.longitude
      if (globalStore.is_virtual) {
        let allowedvalues = setting.value?.constraints?.allowedvalues?.filter((element, index) => {
          return element.includes('H03')
        })
        if (allowedvalues) {
          let index = setting.value?.constraints?.allowedvalues?.indexOf(allowedvalues[0])
          locanIndex.value = index as number
        }
        return
      }
      // 根据经纬度设置水硬度 同时可以获取位置信息
      let result = await props.apiControl.getWaterHard({
        lng: longitude,
        lat: latitude,
      })
      if (result) {
        let location = '   ' + result.province + ' ' + result.city + ' ' + result.district + ' '
        locationInfo.value = location
        let allowedvalues = setting.value?.constraints?.allowedvalues?.filter((element, index) => {
          return element.includes(result.avalue)
        })
        if (allowedvalues) {
          let index = setting.value?.constraints?.allowedvalues?.indexOf(allowedvalues[0])
          locanIndex.value = index as number
          getLocationButtonText.value = '重新获取'
        }
      }
    },
    fail(error) {
      console.error(JSON.stringify(error))
    },
  })
}
/**
 * 获取位置权限
 */
async function getLocationPermission() {
  if (globalStore.is_virtual) {
    uni.showToast({
      title: i18n.t('APP.Common.WaterHaderness.Setting.Tip.Text'),
      icon: 'none',
    })
    return
  }

  try {
    await checkLocationPermission()
    uni.showLoading({
      title: '正在获取...',
    })
    await loadLocalWaterHardness()
    uni.hideLoading()
  } catch (error: any) {
    if (!error.Location) return
    if (error.Location === OS_SYSTEM_LOCATION_PERMISSION) {
      systemVisible.value = true
    } else if (error.Location === APPLICATION_LOCATION_PERMISSION) {
      WeXinVisible.value = true
    } else if (error.Location === WXMP_LOCATION_PERMISSION) {
      AppVisible.value = true
    }
  }
}

/**
 * 立即获取
 */
function directGet() {
  AppVisible.value = false
  uni.openSetting()
}

async function loadSettings() {
  const res = await props.apiControl.getSetting(haId.value, key.value)
  setting.value = cloneDeep(res.data)
  // title为空时，回填setting name到title
  if (!headerTitle.value) {
    headerTitle.value = setting.value.name || ''
  }

  if (key.value.indexOf('EnumType') != -1) {
    keyType.value = 'EnumType' // 枚举类型
  } else if (res.data.constraints?.max || res.data.constraints?.min) {
    keyType.value = 'Range' //范围
    max.value = res.data.constraints?.max || 0
    min.value = res.data.constraints?.min || 0
    if (
      setting.value.key === SETTING_LIGHT_INTERNAL ||
      setting.value.key === SETTING_LIGHT_LOGO ||
      setting.value.key === SETTING_LIGHT_EXTERNAL
    ) {
      min.value = res.data.constraints?.min == 0 ? 1 : res.data.constraints?.min || 1
    }
    stepSize.value = res.data.constraints?.stepsize || 1
    defaultNum.value = res.data.value as number
    unit.value = res.data.unit as string
    tempUnit.value = res.data.unit as string
  }
}
/**
 * 设置参数
 * @param item
 * @param index
 */
async function changeSetting(item: string, index: number) {
  let keyValue = setting.value?.constraints?.allowedvalues?.[index]
  //只读不可以设置参数
  if (setting.value?.constraints?.access == 'read') return
  let value = setting.value?.constraints?.allowedvalues?.[index]
  await showLoading(async () => {
    if (value) {
      let res: any = null
      try {
        res = await props.apiControl.setSetting(haId.value, key.value, value)
      } catch (error) {
        res = error
      } finally {
        setting.value!.displayvalue = item
        // 数据埋点
        safeTrack(() => {
          let track_data = {
            setting_key: key.value,
            setting_value: keyValue,
            successOrNot: res.code == 0,
            error_code: res.code,
            response_msg: res.msg,
          }
          trackEvent(
            'appliance_setting',
            track_data,
            TrackType.ApplianceDetail,
            'Appliance.Parameter.Parameter.Setting'
          )
        })
      }
    }
  })

  // 当前设置的为 “远程控制等级” 的 “永久开启远程启动”，弹出提示框
  if (isRemoteControl.value && keyValue === REMOTE_CONTROL_LEVEL_PERMANENT_REMOTE_START) {
    remoteHintVisible.value = true
  }
}
/**
 * BIWD-设置睡眠时间
 * @param index
 */
async function setBIWDSleepTime(index: number) {
  const settings = [
    {
      key: DatConfig,
      value: DatConfig_SetCollect,
    },
    {
      key: StandbyTime,
      value: sleepTimeListData[index].key,
    },
  ]
  let res: any = null
  try {
    res = await showLoading(() => props.apiControl.setHomeApplianceSettings(haId.value, settings))
  } catch (error) {
    res = error
  } finally {
    curIndex.value = index
    safeTrack(() => {
      let track_data = {
        setting_key: 'set_screen_sleep_time',
        setting_value: sleepTimeListData[index].value,
        successOrNot: res.code == 0,
        error_code: res.code,
        response_msg: res.msg,
      }
      trackEvent('appliance_setting', track_data, TrackType.ApplianceDetail, 'Appliance.Parameter.Parameter.Setting')
    })
  }
}
/**
 *  BIWD-设置屏幕亮度
 */
async function setBIWDNightModeBright(index: number) {
  const brightness = index - 1
  if (curIndex.value === brightness) return

  const settings = [
    {
      key: DatConfig,
      value: DatConfig_SetCollect,
    },
    {
      key: NightModeBright,
      value: brightness,
    },
  ]
  let res: any = null
  try {
    res = await showLoading(() => props.apiControl.setHomeApplianceSettings(haId.value, settings))
  } catch (error) {
    error = res
  } finally {
    curIndex.value = brightness
    let brightnessValue: string
    if (index == 1) {
      brightnessValue = '最暗'
    } else if (index == 5) {
      brightnessValue = '最亮'
    } else {
      brightnessValue = index + ''
    }
    safeTrack(() => {
      let track_data = {
        setting_key: 'set_screen_brightness',
        setting_value: brightnessValue,
        successOrNot: res.code == 0,
        error_code: res.code,
        response_msg: res.msg,
      }
      trackEvent('appliance_setting', track_data, TrackType.ApplianceDetail, 'Appliance.Parameter.Parameter.Setting')
    })
  }
}

/**
 * 范围型
 */
const min = ref(0)
const max = ref(0)
const defaultNum = ref(0)
const stepSize = ref(1)
const unit = ref('')
const tempUnit = ref('')

// 拖动中
function onSliderChanging(e: WechatMiniprogram.SliderChanging) {
  if (tempUnit.value === 'seconds') {
    defaultNum.value = toNumber(e.detail.value.toFixed())
  } else {
    defaultNum.value = e.detail.value
  }
}
async function onSliderChange(e: WechatMiniprogram.SliderChange) {
  onSliderChanging(e)

  let newDefaultNum = defaultNum.value
  if (tempUnit.value === 'seconds') {
    newDefaultNum = toNumber((defaultNum.value * 60).toFixed())
  }

  let res: any = null
  try {
    res = await showLoading(() => props.apiControl.setSetting(haId.value, key.value, newDefaultNum))
  } catch (error) {
    res = error
  } finally {
    safeTrack(() => {
      let track_data = {
        setting_key: key.value,
        setting_value: newDefaultNum.toString(),
        successOrNot: res.code == 0,
        error_code: res.code,
        response_msg: res.msg,
      }
      trackEvent('appliance_setting', track_data, TrackType.ApplianceDetail, 'Appliance.Parameter.Parameter.Setting')
    })
  }
}

/**
 * 去打开设置
 */
function goToSetting() {
  uni.openAppAuthorizeSetting({
    success(res) {
      console.log(res)
    },
  })
}

/**
 * 设置冰水温度
 */
const setCoolWaterTemp = actionDebounce({
  call: async (temp: number) => {
    const submitParams = [
      {
        key: BIWD_WATERTREATMENT_CHILLEDWATERSET,
        value: 'TRUE',
      },
      {
        key: BIWD_WATERTREATMENT_CHILLEDWATERTEMPERATURE,
        value: temp,
      },
    ]
    props.apiControl.setHomeApplianceSettings(haId.value, submitParams)
    coolWaterTemp.value = temp
  },
})

/**
 * TT 运行模式
 */
const SummerMode = [i18n.t('ApplianceSettings.WinterMode.Text'), i18n.t('ApplianceSettings.SummerMode.Text')]
const isShowRunMode = computed(() => [TT_SUMMER_MODE, TT_SUMMER_BLMODE, TT_SETTING_BlState].includes(key.value))
const isMR120 = computed(() => haId.value.indexOf('MR120') !== -1)
const isMR100IRF = computed(() => haId.value.split('-')[1] === 'MR100iRF10720')
const isMR100IRFEMS = computed(() => haId.value.split('-')[1] === 'MR100iRF10720EMS')
const changeRunMode = actionDebounce({
  loadingText: i18n.t('APP.Common.Loading.Text'),
  call: async (index: number) => {
    let newBLState = 0
    let key: string = ''
    let value: string = ''
    let data = {
      settings: [
        {
          key: 'BSH.Common.Setting.TlBl',
          value: 0,
        },
        {
          key: 'BSH.Common.Setting.TlRm',
          value: 0,
        },
        {
          key: TT_SUMMER_MODE,
          value: index,
        },
      ],
    }
    key = TT_SUMMER_MODE
    value = index.toString()
    if (isMR100IRF.value || isMR100IRFEMS.value) {
      newBLState = setTTSummerMode(blState.value, String(index))
      data = {
        settings: [
          {
            key: TT_SETTING_BlState,
            value: newBLState,
          },
        ],
      }
      key = TT_SETTING_BlState
      value = newBLState.toString()
    } else if (isMR120.value) {
      data = {
        settings: [
          {
            key: TT_SUMMER_BLMODE,
            value: index,
          },
        ],
      }
      key = TT_SUMMER_BLMODE
      value = index.toString()
    }

    await applianceControlTrack(
      () => setTTSetting(haId.value, data),
      'appliance_setting',
      { setting_key: key, setting_value: value },
      'Appliance.Parameter.Parameter.Setting'
    )

    curIndex.value = index
  },
})

const listenMessage = (msg: WS.Message) => {
  if (msg.haId !== haId.value || !Array.isArray(msg.items)) return
  handleMessages(msg.items)
}
function handleMessages(messages: WS.MessageItem[]) {
  console.log('handleMessages', messages)
  for (const item of messages) {
    for (const observe of observes) {
      if (observe.key === item.key) {
        observe.handler(item)
      }
    }
  }
}
const observes: { key: string; handler: (message: WS.MessageItem) => any }[] = [
  {
    key: TT_SETTING_BlState,
    handler: (message) => {
      blState.value = message.value as string
    },
  },
]
</script>
<style lang="less">
.params-settings {
  padding-top: 16rpx;
  slider {
    margin: 0;
  }
  .range-picker {
    margin: 52rpx 16rpx 44rpx;
  }
  .min-max-box {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .unit {
      font-weight: 400;
      font-size: 36rpx;
      line-height: 50rpx;
    }
    .min-max {
      font-weight: 400;
      font-size: 36rpx;
      line-height: 50rpx;
      color: #5c5c5c;
      transform: translateY(8rpx);
    }
    .current {
      font-weight: 500;
      font-size: 48rpx;
      line-height: 68rpx;
      color: var(--primary-color);
    }
  }
}
.local-class {
  background: var(--primary-color);
  height: 32rpx;
  line-height: 32rpx;
  width: 56rpx;
  font-weight: 500;
  font-size: 20rpx;
  color: #ffffff;
  margin-left: 16rpx;
  text-align: center;
  display: inline-block;
  font-family: PingFang SC;
  line-height: normal;
}
.location-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #f4f4f6;
  height: 88rpx;
  align-items: center;
  .location-info {
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    opacity: 0.6;
    margin-left: 32rpx;
  }
  .action-location {
    font-style: normal;
    font-weight: 400;
    font-size: 32rpx;
    color: var(--primary-color);
    margin-right: 32rpx;
  }
}
.waterHard {
  padding-top: 0;
}
.modal-text {
  font-weight: 400;
  font-size: 32rpx;
  line-height: 48rpx;
  color: rgba(0, 0, 0, 0.6);
}
.system-img {
  width: 100%;
  margin-bottom: 40rpx;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
</style>
